<template>
	<view class="container">
		<com-head textTit="平台认证" :typeVal="1" :scrollTop="scrollTop"></com-head>


		<view class="rechargeAmount">
			<!-- 证件图片 -->
			<view class="title">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>证件图片
			</view>
			<view class="imgbox" >
				<view class="imgbox__left">
					<image v-if="fromData.card_front == ''" @click="uploadPhoto(1)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/s_f.png" mode="aspectFill"></image>
					<view class="imgWrap" v-else>
						<u-icon name="close-circle" color="#D5BE82" size="28" @click="deleImg(1)"></u-icon>
						<image :src="fromData.card_front" mode="aspectFill"></image>
					</view>
				</view>
				<view class="imgbox__right">
					<image v-if="fromData.card_back == ''" @click="uploadPhoto(2)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/s_z.png" mode="aspectFill"></image>
					<view class="imgWrap" v-else>
						<u-icon name="close-circle" color="#D5BE82" size="28" @click="deleImg(2)"></u-icon>
						<image :src="fromData.card_back" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<!-- 身份信息 -->
			<view class="title">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>身份信息
			</view>
			<view class="groupList">
				<view class="item">
					<text>姓名</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.name" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<text>手机号</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.phone" placeholder="请输入" />
					</view>
				</view>
				<view class="item">
					<text>身份证号</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.id_card" placeholder="请输入" />
					</view>
				</view>
				<view class="item" @click="pickerShow = true">
					<text>所在地区</text>
					<view class="right">
						{{select || '请选择'}}
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view class="item">
					<text>详细地址</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.address_info" placeholder="请输入" />
					</view>
				</view>
			</view>
			
			<!-- 银行账户 -->
			<view class="title">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>银行账户
			</view>
			<view class="groupList">
				<view class="item" @click="selectShow = true">
					<text>开户行</text>
					<view class="right">
						{{fromData.bank_name || '请选择'}}
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view class="item">
					<text>卡号</text>
					<view class="right">
						<input class="uni-input" v-model="fromData.card_number" placeholder="请输入" />
					</view>
				</view>
			</view>

			<!-- 其他必要证件 -->
			<view class="title">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>其他必要证件
			</view>
			<view class="imgbox" >
				<view class="imgbox__left">
					<image v-if="fromData.qualification == ''" @click="uploadPhoto(3)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/j_f.png" mode="aspectFill"></image>
					<view class="imgWrap" v-else>
						<u-icon name="close-circle" color="#D5BE82" size="28" @click="deleImg(3)"></u-icon>
						<image :src="fromData.qualification" mode="aspectFill"></image>
					</view>
				</view>
				<view class="imgbox__right">
					<image v-if="fromData.health == ''" @click="uploadPhoto(4)" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/j_z.png" mode="aspectFill"></image>
					<view class="imgWrap" v-else>
						<u-icon name="close-circle" color="#D5BE82" size="28" @click="deleImg(4)"></u-icon>
						<image :src="fromData.health" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<!-- 提交 -->
			<view class="payBtn" @click="submit">
				<view>提交</view>
			</view>

		</view>
		
		
		<!-- 地区组件 -->
		<u-select v-model="pickerShow" mode="mutil-column-auto" :list="pickerList" value-name="id" label-name="area_name" child-name="child" @confirm="pickerConfirm"></u-select>
		
		<!-- 银行下拉 -->
		<u-select v-model="selectShow" mode="single-column" :list="selectList" value-name="id" label-name="name" @confirm="selectConfirm"></u-select>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isRead: false,
				activeIndex: 0,
				fromData: {
					name: '',// 姓名
					card_front: '', // 身份证正面
					card_back: '',// 身份证反面
					id_card: '',// 身份证号
					province_id: '',// 省id
					city_id: '',// 市id
					area_id: '',// 区id
					address_info: '',// 详细地址
					bank_id: '',// 银行id
					bank_name: '',// 银行名称
					card_number: '',// 银行卡号
					health: '',// 健康证
					qualification: '',// 从业资格证
					phone: ''// 手机号
				},
				pickerList: [],
				select: '',   //省市区绑定值
				scrollTop: 0,
				selectShow: false,
				pickerShow: false,
				selectList: []
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.getBank()
			this.treeFun()
		},
		methods: {
			validateForm(formData) {
			  for (const key in formData) {
				  console.log(11, formData[key])
			    if (formData[key] === '' || formData[key] === null || formData[key] === undefined) {
				  // this.utlis.Toast(`${key} 不能为空`)
				  this.utlis.Toast(`请填写完整信息`)
			      return false;
			    }
			  }
			  return true;
			},
			selectConfirm(e) {
				console.log(222, e);
				this.fromData.bank_id = e[0].value
				this.fromData.bank_name = e[0].label
			},
			async submit() {
				// 提交时调用
				if (this.validateForm(this.fromData)){
					console.log(666, this.fromData)
					let { data, code, msg } = await this.$u.api.staffJoin(this.fromData);
					if (code) {
						this.utlis.Toast("提交成功")
						setTimeout(()=>{
							this.jump('/pages/index/index', 1)
						}, 1000)
					}
				}
			},
			pickerFun() {
				this.pickerShow = true
			},
			async treeFun() {
				let { data, code, msg } = await this.$u.api.tree();
				if (code) {
					this.pickerList = data
					console.log(66, this.pickerList)
				}
			},
			async getBank() {
				let { data, code, msg } = await this.$u.api.getBank();
				if (code) {
					this.selectList = data
				}
			},
			// 回调参数为包含columnIndex、value、values
			pickerConfirm(e) {
				console.log('confirm', e)
				this.pickerShow = false
				this.select = e[0].label + '-' + e[1].label + '-' + e[2].label
				this.fromData.province_id = e[0].value || ''
				this.fromData.city_id = e[1].value || ''
				this.fromData.area_id = e[2].value || ''
				console.log(34, this.fromData.province_id, this.fromData.city_id, this.fromData.area_id)
			},
			// 上传文件
			uploadPhoto(type){
				let that = this
				wx.chooseImage({
					success: (imgRes) => {
						let tempFilePaths = imgRes.tempFilePaths[0]
						let imgType = tempFilePaths.split(".")[1]
						console.log(tempFilePaths,imgType,"imgResimgResimgRes")
						if(imgType == 'jpg' || imgType == 'png' || imgType == 'cdr'){
							uni.showLoading({
								title: '文件上传中',
								mask: true,
							   });
							  uni.uploadFile({
								url: that.utlis.baseUrl + '/upload',
								filePath: imgRes.tempFilePaths[0],
								name: 'files',
								headers: {
									'Content-Type': 'multipart/form-data' //********划重点
								 },
								success(res) {
									var resdata = JSON.parse(res.data)
									that.utlis.Toast("上传成功","success")
									uni.hideLoading();
									switch(type){
										case 1:
											that.fromData.card_front = resdata.data;
											break;
										case 2:
											that.fromData.card_back = resdata.data;
											break;
										case 3:
											that.fromData.qualification = resdata.data;
											break;
										case 4:
											that.fromData.health = resdata.data;
											break;
										default:
											break;
									}
								},
								fail: (err) => {
									uni.hideLoading();
									that.utlis.Toast("上传失败")
								}
							})
						}else{
							that.utlis.Toast("您上传图片格式不正确")
						}
					}
				})
			},
			deleImg(type){
				uni.showModal({
				    title: '提示',
					confirmColor:'#007664',
				    content: '您确定要删除此图片？',
				    success: async (res) => {
				        if (res.confirm) {
							switch(type){
								case 1:
									this.fromData.card_front = '';
									breack;
								case 2:
									this.fromData.card_back = '';
									breack;
								case 3:
									this.fromData.qualification = '';
									breack;
								case 4:
									this.fromData.health = '';
									breack;
								default:
									break;
							}
							this.utlis.Toast('删除成功',"success")
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			change(e) {
			    console.log('change', e);
			},
			checkedFun() {
				console.log(11)
				this.isRead = !this.isRead
			},
			chose(index) {
				this.activeIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 32rpx;

		.payBtn {
			width: 100%;
			margin: 0 auto;

			view {
				width: 686rpx;
				height: 96rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 96rpx;
				background: linear-gradient(85deg, #50DCC2, #007664);
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				margin: 100rpx 0 20rpx 0;
			}
		}

		.rechargeAmount {
			margin: 40rpx 0 44rpx 0;

			>.title {
				font-size: 32rpx;
				color: #242833;
				margin: 32rpx 0 20rpx 0;

				image {
					width: 9rpx;
					height: 32rpx;
					position: relative;
					top: 5rpx;
					margin-right: 12rpx;
				}
			}

			.groupList {
				width: 100%;
				padding: 0 32rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				margin: 49rpx 0 34rpx 0;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 96rpx;
					color: #333333;
					font-size: 26rpx;
					border-bottom: 1rpx solid rgba(142, 142, 142, .24);
					position: relative;

					.image {
						width: 33rpx;
						height: 33rpx;
						display: inline-block;
						position: relative;
						top: 5rpx;
						margin-right: 19rpx;
					}

					.imgs {
						width: 33rpx;
						height: 33rpx;
						display: inline-block;
						position: absolute;
						right: 0;
					}

					.right {
						// width: 450rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						text {
							margin-right: 32rpx;
						}
					}
				}

				.item:last-child {
					border-bottom: 1rpx solid #F6F7FA;
				}
			}
		}
	}
	.uni-input{
		text-align: right;
		width: 450rpx;
		// border: 1rpx solid red;
		font-size: 28rpx;
		color: #4D5562;
	}

	.imgbox{
		display: flex;
		margin-top: 28rpx;
		width: 686rpx;
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&__left, &__right{
			flex: 1;
			width: 313rpx;
			height: 183rpx;
			border-radius: 10rpx;
			image{
				width: 313rpx;
				height: 183rpx;
				background: #f6f7fa;
				// border: 1rpx solid red;
			}
		}
		&__left{
			margin: 33rpx 20rpx 0 24rpx;
		}
		&__right{
			margin: 33rpx 20rpx 0 0;
		}
		.imgWrap{
			position: relative;
			u-icon{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		
	}
	.groupList{
		text{
			font-size: 28rpx;
			color: #4D5562;
		}
		input{
			color: #333;
		}
	}
</style>
<style>
	page {
		background-color: #F6F7FA;
	}
</style>